<template>
  <view class="tab-bar">
    <view class="tab-item" @click="switchTab('/pages/kk/shouye/shouye')">
      <image class="tab-icon" src="/static/首页.png"></image>
      <text class="tab-text">首页</text>
    </view>
    
    <!-- 中间的图标 -->
    <view class="tab-center" @click="onCenterClick">
      <image class="center-icon" src="../../static/images/1876.png_860.png"></image>
    </view>
    
    <view class="tab-item" @click="switchTab('/pages/my/my')">
      <image class="tab-icon" src="/static/我的-我的.png"></image>
      <text class="tab-text">ta的</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    switchTab(path) {
      uni.switchTab({ url: path });
    },
    onCenterClick() {
      // 这里写中间图标的点击事件处理逻辑，例如跳转到某个页面
      uni.navigateTo({ url: '../../pages/kk/yingjijiuyuan/yingjijiuyuan' });
    }
  }
}
</script>

<style>
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 50px; /* tabBar 的高度 */
  background-color: #ffffff;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tab-icon {
  width: 24px;
  height: 24px;
}
.tab-text {
  font-size: 10px;
}
.tab-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px; /* 调整位置 */
}
.center-icon {
  width: 90rpx; /* 中间图标的宽度 */
  height: 90rpx; /* 中间图标的高度 */
}
</style>
